<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my music</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
    <link href="static/css/font-awesome.min.css" rel="stylesheet">
    <link href="static/css/index.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <div class="m-song" id="song-wrap">
        <div class="m-song-bg" style="background-image: url('./static/img/bg.jpg');opacity:1;">
        </div>
        <div class="m-song-wrap m-song-wraptop">
            <div class="m-song-disc">
                <div class="m-song-turn">
                    <div class="m-song-img">
                        <img class="u-img" src="./static/img/song.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="music-p" style="position:absolute;bottom:25%; font-size:13px;padding: 10px;">
        <p id="showP" class="animationP" style="text-indent: 2em;">
            这个世界上肯定有另一个我，做着我不敢做的事，过着我想过的生活。一个人逛街，一个人吃饭，一个人旅行，一个人做很多事。极致的幸福，存在于孤独的深海。在这样日复一日的生活里，我逐渐和自己达成和解。</p>
    </div>
    <div class="play-control">
        <audio id="music" src="media/蔡健雅 - 红色高跟鞋.mp3" autoplay="autoplay"></audio>
        <div class="m-control clear_fix">
            <a href="javascript:void(0)" id="m-pre"><i class="fa fa-step-backward"></i></a>
            <a href="javascript:void(0)" id="m-play"><i class="fa fa-pause"></i> </a>
            <a href="javascript:void(0)" id="m-next"><i class="fa fa-step-forward"></i></a>
        </div>
        <div class="progress">
            <div class="progress-bar"></div>
            <div id="slide_btn"></div>
        </div>
        <div class="mtime" id="mtime">
            <p>
                <span class="autho">红色高跟鞋-蔡雅健</span>
            <div id="time">
                <span class="m_time_now">00:00</span>/<span class="time_t">00:00</span>
            </div>
            </p>
        </div>
    </div>
</div>
</body>
<script src="static/js/jquery.min.js"></script>
<script src="lib/musicPlayer.js"></script>
<script>
    var datamusic = {
        status: 'ok',
        data: [
            {
                "name": '红色高跟鞋-蔡雅健',
                "m_url": "media/蔡健雅 - 红色高跟鞋.mp3"
            },
            {
                "name": 'Staring At My Journey',
                "m_url": "media/b.mp3"
            },
            {
                "name": '孙燕姿 - 遇见.mp3',
                "m_url": "media/孙燕姿 - 遇见.mp3"
            },
            {
                "name": 'Nomak - Moon Flow.mp3',
                "m_url": "media/Nomak - Moon Flow.mp3"
            }
        ]
    }
    var mPlayer = new musicPlayer({
        domId: 'music',
        nexdom: '#m-next',
        predom: '#m-pre',
        toogledom: '#m-play'
    }, datamusic)
    mPlayer.init();

    var datap = [
        {'content': '这个世界上肯定有另一个我，做着我不敢做的事，过着我想过的生活。一个人逛街，一个人吃饭，一个人旅行，一个人做很多事。极致的幸福，存在于孤独的深海。在这样日复一日的生活里，我逐渐和自己达成和解。'},
        {'content': '从小觉得最厉害的人就是妈妈，不怕黑，什么都知道，做好吃的饭，把生活打理得井井有条，哭着不知道怎么办时只好找她。可我好像忘了这个被我依靠的人也曾是个小姑娘，怕黑也掉眼泪，笨手笨脚会被针扎到手。最美的姑娘，是什么让你变得这么强大呢，是岁月，还是爱。——德卡先生'}
    ]
    var len = datap.length;
    var now = 0;
    setInterval(function () {
        $("#showP").html(datap[now].content);
        $("#showP").removeClass('animationP').addClass('animationP')
        now = (now + 1) % len;
    }, 5000)
</script>
</html>